<template>
  <div>
    <!-- 使用el-row和el-col来创建网格系统 -->
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="24" :lg="8">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="工号">
            <el-input v-model="form.id"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.password"></el-input>
          </el-form-item>

          <!-- 为按钮组添加一个容器，并使用flex布局居中 -->
          <div style="display: flex; justify-content: center;">
            <el-form-item>
              <el-button type="primary" @click="onSubmit">登录</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </div>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        id: '',
        password: ''
      }
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!');
      // 这里可以处理登录逻辑
      this.$router.push({ name: 'xiaGong', params: { name: this.form.id } });
    },
  }
}
</script>

<style scoped>
/* 添加一些额外的样式来改善间距 */
.el-form-item {
  margin-bottom: 15px;
}

.el-button {
  margin-right: 10px;
}

/* 适配小屏幕设备 */
@media (max-width: 767px) {
  .el-form-item {
    label {
      display: block;
      margin-bottom: 5px;
      text-align: left;
    }
  }

  .el-input {
    width: 100%;
  }

  .el-button {
    width: 100%;
    margin-bottom: 10px;
    margin-right: 0;
  }

  .el-button:last-child {
    margin-bottom: 0;
  }

  /* 居中对齐按钮 */
  .el-row > .el-col > .el-form > div {
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
}
</style>